<script setup>
    import {ref, computed} from "vue"
    const things = ref([
      {id: 1, done: false, name: "跑步"},
      {id: 2, done: false, name: "看书"},
      {id: 3, done: false, name: "睡觉"},
      {id: 4, done: false, name: "追剧"},
      {id: 5, done: false, name: "学习"},
      {id: 6, done: false, name: "撸码"},
    ])
    // 使用计算属性推导全选值，这样可以在所有选项勾选后，自动勾选全选
    const checkAll = computed({
      get() {
        return things.value.every(item => item.done)
      },
      set(val) {
        things.value.forEach(item => {
          item.done = val
        });
      }
    })
    // 反选
    const onReverse = () => {
      things.value.forEach(item => {
        item.done = !item.done
      })
    }
</script>

<template>
  <div>
    <span class="operate">
      <span>
        <input type="checkbox" id="all" v-model="checkAll">
        <label for="all">全选</label>
      </span>
      <button @click="onReverse()">反选</button>
    </span>
    <ul>
      <li v-for="item in things" key="item.id">
        <input type="checkbox" v-model="item.done">
        <span :class="{emphasize: item.done}">{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<style>
  /* 消除全局样式 */
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  /* 设置主体容器样式与布局 */
  #app {
    margin: 100px auto;
    padding: 10px 16px;
    width: 480px;
    background-color: #67a096;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
  }
  /* 设置操作栏样式 */
  .operate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #ccc solid;
    padding-bottom: 8px;
  }
  .operate button {
    width: 45px;
    height: 28px;
  }
  .operate label {
    margin-left: 4px;
  }
  /* 设置内容样式 */
  ul {
    list-style: none;
  }
  li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px #ccc solid;
    padding: 7px 0;
  }
  /* 设置勾选样式 */
  .emphasize {
    color: rgb(8, 6, 134);
    text-decoration: line-through;
  }
</style>